import { Form, Input, Button, Table, Popconfirm, Space, Select, Pagination } from 'antd'
import React, { useState, useEffect } from 'react';
import './constractSign.scss'
import SignAdd from './SignAdd/SignAdd'
import SignDetail from './SignDetail/SignDetail'
import http from '../../utils/http'
import store from '../../store';
const { Option } = Select;

const Contract_signing_management = () => {
  const [form] = Form.useForm();
  const [isSignAdd, setAdd] = useState(false);
  const [isSignDetail, setDetail] = useState(false);
  const [data, setData] = useState([])
  const [value2, setValue2] = useState()
  const [delkey, setDelkey] = useState([])
  const [selectedRowKeys, setSelectedRowKeys] = useState([])


  function signData() {
    // form.getFieldsValue().state=='代签' ? 0 : (form.getFieldsValue().state=='已过期' ? 1 : 2)

    http({
      url: '/contract-table/findContractTable',
      params: {
        per_name: form.getFieldsValue().username ? form.getFieldsValue().username : '',
        ten_Serialint: form.getFieldsValue().building ? form.getFieldsValue().building.substring(0, 2) : '',
        room_no: form.getFieldsValue().room ? form.getFieldsValue().room : '',
        contract_type: form.getFieldsValue().attribution ? form.getFieldsValue().attribution : '',
        contract_state: form.getFieldsValue().state ? parseInt(form.getFieldsValue().state) : ''
      }
    }).then((res) => {
      console.log('合同签订管理渲染表格', res);
      store.lijuhua.total = res.data.countRows;
      // console.log(res.data.listContractTable);
      if (res.code == 200) {
        let arr = res.data.listContractTable.map((v, i) => {
          // console.log(v.contract_state);
          // if(v.contract_state==0){
          //   v.contract_state='待签'
          // }else if(v.contract_state==1){
          //   v.contract_state='生效中'
          // }else{
          //   v.contract_state='已到期'
          // }
          return {
            key: v.contract_id,
            tenant: v.per_name,
            building: v.ten_Serialint + '幢',
            room: v.room_no,
            type: v.contract_type,
            state: v.contract_state == 0 ? '待签' : (v.contract_state == 1 ? '生效中' : '已到期'),
            signtime: v.contract_create_time,
            expiretime: v.contract_end_time
          }
        })
        setData(arr)
      }
    })
  }

  // 一开始就渲染合同签订管理表格
  useEffect(() => {
    signData();
  }, [])

  // 查询
  const search = () => {
    signData();
  }

  // 跳转到合同订立新增组件
  const add = () => {
    setAdd(true)
  }

  // 重置
  const resize = () => {
    setSelectedRowKeys([]);
    store.lijuhua.current = 1
    form.setFieldsValue({
      username: '',
      building: '',
      room: '',
      attribution: '',
      state: ''
    })
    signData();
  }

  // 跳转到合同签订详情组件，带key值
  const openEditBox = (a, b) => {
    setDetail(true);
    setValue2(b.key)
    // console.log(b);
  }

  // 取消删除操作
  function cancel(e) {
  }
  // 确认删除操作
  function confirm(a, b) {
    let id = [];
    if (b) {
      // 单删
      id.push(b.key)
    } else {
      // 批量删除
      id = delkey;
    }
    console.log(id);
    http({
      url: '/contract-table/delete_ContractTable',
      method: 'post',
      data: id
    }).then((res) => {
      console.log(res);
      signData();
    })
  }

  // 页码
  const pageChange = (page, size) => {
    store.lijuhua.current = page
    http({
      url: '/contract-table/findContractTable',
      params: {
        current: page,
      }
    }).then((res) => {
      console.log('渲染文章发布管理表格', res);
      if (res.code == 200) {
        let arr = res.data.listContractTable.map((v, i) => {
          return {
            key: v.contract_id,
            tenant: v.per_name,
            building: v.ten_Serialint + '幢',
            room: v.room_no,
            type: v.contract_type,
            state: v.contract_state == 0 ? '待签' : (v.contract_state == 1 ? '生效中' : '已到期'),
            signtime: v.contract_create_time,
            expiretime: v.contract_end_time
          }
        })
        setData(arr)
      }
    })
  }

  // 表头
  const columns = [
    {
      title: '租户名称',
      dataIndex: 'tenant',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '所属楼宇',
      dataIndex: 'building',
    },
    {
      title: '房间名称',
      dataIndex: 'room',
    },
    {
      title: '合同类型',
      dataIndex: 'type',
    },
    {
      title: '合同状态',
      dataIndex: 'state',
    },
    {
      title: '签约时间',
      dataIndex: 'signtime',
    },
    {
      title: '到期时间',
      dataIndex: 'expiretime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => (
        <Space size="middle">
          <a href="#" onClick={() => { openEditBox(text, record) }}>详情</a>
          <Popconfirm
            title="确定要删除吗?"
            onConfirm={() => { confirm(text, record) }}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // 前端合同签订管理假数据
  // const data = [
  // {
  //   key: '1',
  //   tenant: '杭州久碳科技有限公司',
  //   building: 'C2幢',
  //   room: '206',
  //   type: '续签',
  //   state: '生效中',
  //   signtime: '2020-05-17',
  //   expiretime: '2022-1-23'
  // },
  // {
  //   key: '2',
  //   tenant: '杭州久碳科技有限公司',
  //   building: 'C2幢',
  //   room: '206',
  //   type: '续签',
  //   state: '生效中',
  //   signtime: '2020-05-17',
  //   expiretime: '2022-1-23'
  // },
  // {
  //   key: '3',
  //   tenant: '杭州久碳科技有限公司',
  //   building: 'C2幢',
  //   room: '206',
  //   type: '续签',
  //   state: '生效中',
  //   signtime: '2020-05-17',
  //   expiretime: '2022-1-23'
  // },
  // {
  //   key: '4',
  //   tenant: '杭州久碳科技有限公司',
  //   building: 'C2幢',
  //   room: '206',
  //   type: '续签',
  //   state: '生效中',
  //   signtime: '2020-05-17',
  //   expiretime: '2022-1-23'
  // },
  // ]; // rowSelection object indicates the need for row selection

  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
      setDelkey(selectedRowKeys);
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
      // disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      key: record.key,
    }),
  };


  if (isSignAdd) {
    return <div className='roleContent'>
      <SignAdd setAdd={setAdd} />
    </div>
  } else if (isSignDetail) {
    return <div className='roleContent'>
      <SignDetail value2={value2} setDetail={setDetail} />
    </div>
  } else {
    return <div className='roleContent'>
      <Form form={form} name="horizontal_login" layout="inline" className='title'>
        <Form.Item
          name="username">
          <div className='kuai'>
            <span></span>
            <span>合同签订管理</span>
          </div>
        </Form.Item>
        <Form.Item className='btn'>
          <div>
            <Button className='cha'
              type="primary"
              onClick={add}>新增</Button>
            <Popconfirm title='确定要将它们全部删除吗？'
              onConfirm={() => { confirm() }}
              onCancel={cancel} okText='YES' cancelText='NO'>
              <a href='#'> <Button className='resize' type="primary">批量删除</Button></a>
            </Popconfirm>
          </div>

        </Form.Item>
      </Form>
      <div className='biao'>
        <Form form={form} name="horizontal_login" layout="inline" className='Role'>
          <Form.Item
            name="username"
            label='租户名称'
          ><Input placeholder='请输入租户名称' />
          </Form.Item>
          <Form.Item
            name="building"
            label='所属楼宇'
          >
            <Select placeholder='请选择' className='select'>
              <Option value="A1幢">A1幢</Option>
              <Option value="A2幢">A2幢</Option>
              <Option value="A3幢">A3幢</Option>
              <Option value="A4幢">A4幢</Option>
              <Option value="A5幢">A5幢</Option>
              <Option value="B1幢">B1幢</Option>
              <Option value="B2幢">B2幢</Option>
              <Option value="B3幢">B3幢</Option>
              <Option value="B4幢">B4幢</Option>
              <Option value="B5幢">B5幢</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="room"
            label='房间名称'
          ><Input placeholder='请输入房间名称' />
          </Form.Item>
          <Form.Item
            name="attribution"
            label='合同属性'
          >
            <Select placeholder='请选择' className='select'>
              <Option value="新签">新签</Option>
              <Option value="续签">续签</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="state"
            label='合同状态'
          >
            <Select placeholder='请选择' className='select'>
              <Option value="0">待签</Option>
              <Option value="1">生效中</Option>
              <Option value="2">已到期</Option>
            </Select>
          </Form.Item>
          <Form.Item className='btn'>
            <div>
              <Button className='cha'
                type="primary"
                onClick={search}>查询</Button>
              <Button className='resize' onClick={resize} type="primary">重置</Button>
            </div>

          </Form.Item>
        </Form>
        <Table className='table1' pagination={false}
          rowSelection={{
            ...rowSelection,
          }}
          columns={columns}
          dataSource={data}
        />
        <Pagination className='page' defaultCurrent={1} current={store.lijuhua.current} total={store.lijuhua.total} onChange={pageChange} />
      </div>
    </div>
  }
};

export default Contract_signing_management;